import { memo, useMemo, useEffect } from "react"
import styled from "@emotion/styled"
import { useModalSlideUp } from "@/features/useModal"
import ButtonRegular from "@/components/composite/ButtonRegular/main"
import { useForm, FormProvider } from "react-hook-form"
import { PageHeader } from "@/pages/AccountPage/components/PageHeader"
import { PALY_INFO } from "../constants"
import InputText from "@/components/form_item/InputText"
import { Repository } from "@/atoms/api_repositories"
import { useAddAccounts } from "@/features/business"

const Container = styled.div`
    position: relative;
    background-color: rgba(242, 243, 245, 1);
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
`
const ContainerBg = styled.div`
    width: 100%;
    background-color: ${(props) => props.color};
    height: 174rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    & > img {
        height: 36rem;
        width: auto;
        margin-top: 16rem;
    }
`
const CardWarp = styled.div`
    height: 296rem;
    margin: -44rem 12rem 0 12rem;
    padding: 16rem;
    border-radius: 12rem;
    background: #ffffff;
    font-family: "Gilroy";

    & > h3 {
        font-weight: 700;
        font-size: 14rem;
        line-height: 20rem;
        margin: 0;
        padding: 0;
        color: #131416;
    }
    & > p {
        font-weight: 500;
        font-size: 12rem;
        line-height: 16rem;
        margin-top: 6rem;
        padding: 0;
        color: #69728c;
    }
`
const BottomBlock = styled.div`
    padding: 12rem 0 32rem;
    width: 100%;
    margin-top: 46rem;
`
const SubmitButton = styled(ButtonRegular)`
    background: ${({ disabled }) =>
        disabled
            ? "linear-gradient(90deg, #ffadc2 0%, #ffadeb 100%)"
            : "linear-gradient(90deg, #FF3568 10%, #FF33CC 100%)"};
    width: 100%;
    height: 48rem;
    line-height: 40rem;
    font-family: "SF Pro Text";
    font-weight: 500;
    font-size: 16rem;
    text-align: center;
    color: ${({ disabled }) => (disabled ? "#ffffff59" : "#FFFFFFF2")};
    box-shadow: unset;
`

const RechargeInfo = styled.div`
    height: 32rem;
    color: #9fa7bc;
    display: flex;
    align-items: center;
    margin: 16rem 0;
    & > span {
        flex: 1;
        border-bottom: 1px solid #b3b4bc;
        & > span {
            line-height: 24rem;
        }
    }
    .line {
        flex: unset;
        width: 7rem;
        height: 2rem;
        margin: 0 5rem;
        background-color: #d5d5d8;
        border-bottom: 1px solid transparent;
    }
`

const InputStyled = styled(InputText)`
    & > input {
        font-family: "Gilroy";
        padding-left: 0;
        caret-color: #165dff;
        background: #fff;
        border: none;
        border-bottom: 1px solid #b3b4bc;
        border-radius: unset;
        &::placeholder {
            font-family: "Gilroy";
            padding-left: 0;
            color: #9fa7bc;
        }
    }
    .inputTitle {
        padding-left: 0;
        left: 0;
    }
    & :focus-within {
        border-color: transparent;
        border-bottom-color: #b3b4bc;
    }
`

type IProps = {
    channelName: string
    onClose?: () => void
}

function RechargeAccountDefault({ channelName, onClose }: IProps) {
    const { data } = Repository.useUserInfo()
    const { realName } = data || {}
    const { addAccount, success } = useAddAccounts()
    const { firstName, middleName, lastName } = realName || {}
    const { close: closeAccountModal } = useModalSlideUp("account-page")
    const { close } = useModalSlideUp("select")
    const methods = useForm({
        defaultValues: {
            account: "",
        },
    })

    const palyInfo = useMemo(
        () => PALY_INFO[channelName as keyof typeof PALY_INFO] || {},
        [channelName],
    )

    const handleBack = () => {
        close()
        closeAccountModal()
    }

    const handleSubmit = () => {
        const { account } = methods.getValues()
        if (!account) {
            return
        }

        addAccount({
            account: account,
            channel_name: channelName,
            first_name: realName?.firstName,
            middle_name: realName?.middleName,
            last_name: realName?.lastName,
        })
    }

    useEffect(() => {
        if (success) {
            handleBack()
            if (onClose) {
                onClose()
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [success])

    return (
        <>
            <Container>
                <ContainerBg color={palyInfo?.themeColor || "##F73B6D"}>
                    <PageHeader
                        title={palyInfo?.title}
                        onBack={handleBack}
                    />
                    {palyInfo?.titleIcon}
                </ContainerBg>
                <CardWarp>
                    <h3>Add {palyInfo?.name} Account</h3>
                    <p>Please enter your account information.</p>
                    <RechargeInfo>
                        <span>
                            <span>{firstName}</span>
                        </span>
                        <span className="line"></span>
                        <span>
                            <span>{middleName}</span>
                        </span>
                        <span className="line"></span>
                        <span>
                            <span>{lastName}</span>
                        </span>
                    </RechargeInfo>
                    <FormProvider {...methods}>
                        <InputStyled
                            fieldName={"account"}
                            placeholder={"You account"}
                            showClear={false} // false不需要showClear
                            required={false}
                        />
                    </FormProvider>
                    <BottomBlock>
                        <SubmitButton onClick={handleSubmit}>submit</SubmitButton>
                    </BottomBlock>
                </CardWarp>
            </Container>
        </>
    )
}

export default memo(RechargeAccountDefault)
